---
type: tutorial
title: Crie um arquivo de postagens do blog
description: |-
  Tutorial: Construa seu primeiro blog Astro —
  Utilize Astro.glob() para acessar dados de arquivos no seu projeto
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Agora que você tem algumas postagens do blog que podem ser acessadas por links, é hora de configurar a página Blog para criar uma lista de postagens automaticamente!

<PreCheck>
  - Acessar dados de todas as suas postagens de uma vez usando `Astro.glob()`
  - Mostrar uma lista de postagens gerada dinamicamente na sua página Blog
  - Refatorar para utilizar um componente `<BlogPost />` para cada item da lista
</PreCheck>

## Dinamicamente mostre uma lista de postagens

<Steps>
1. Adicione o seguinte código em `blog.astro` para retornar informação sobre todos os seus arquivos Markdown. `Astro.glob()` retornará um array de objetos, um para cada postagem do blog.

    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('./posts/*.md');
    const pageTitle = "Meu Blog de Aprendizagem Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Postagem 1</a></li>
        <li><a href="/posts/post-2/">Postagem 2</a></li>
        <li><a href="/posts/post-3/">Postagem 3</a></li>
      </ul>
    </BaseLayout>
      ```


2. Para gerar a lista inteira de postagens dinamicamente, utilizando os títulos das postagens e URLs, substitua suas tags `<li>` individuais com o seguinte código Astro:

    ```astro title="src/pages/blog.astro" del={9,10,11} ins={13}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro'
    const allPosts = await Astro.glob('./posts/*.md');
    const pageTitle = "Meu Blog de Aprendizagem Astro";
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
      <ul>
        <li><a href="/posts/post-1/">Postagem 1</a></li>
        <li><a href="/posts/post-2/">Postagem 2</a></li>
        <li><a href="/posts/post-3/">Postagem 3</a></li>

        {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
      </ul>
    </BaseLayout>
    ```

    Sua lista inteira de postagens do blog agora está sendo gerada dinamicamente, por mapear o array retornado por `Astro.glob()`.

3. Adicione uma nova postagem do blog criando um novo arquivo `post-4.md` em `src/pages/posts/` e adicionando algum conteúdo Markdown. Certifique-se de adicionar as propriedades de frontmatter usadas abaixo.

    ```markdown
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: Minha Quarta Postagem no Blog
    author: Aluno Astro
    description: "Esta postagem irá aparecer por si mesma!"
    image: 
        url: "https://docs.astro.build/default-og-image.png"
        alt: "A palavra astro acima de uma ilustração de planetas e estrelas."
    pubDate: 2022-08-08
    tags: ["astro", "sucessos"]
    ---
    Esta postagem deve aparecer junto das minhas outras postagens do blog, pois `Astro.glob()` está retornando uma lista de todas as minhas postagens para criar minha lista.
    ```

4. Revisite a página do seu blog na pré-visualização do seu navegador em `http://localhost:4321/blog` e procure por uma lista atualizada com quatro itens, incluindo sua nova postagem no blog!
</Steps>

<Box icon="puzzle-piece">

## Desafio: Crie um componente BlogPost

Tente por si só fazer todas as mudanças necessárias em seu projeto Astro para que você posssa usar o seguinte código para gerar sua lista de postagens do blog:

```astro title="src/pages/blog.astro" del={2} ins={3}
<ul>
  {allPosts.map((post) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
  {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
</ul>
```

<details>
<summary>Expanda para ver as etapas</summary>

<Steps>
1. Crie um novo componente em `src/components/`.

    <details>
    <summary>Mostre o nome do arquivo</summary>
    ```
    BlogPost.astro
    ```
    </details>

2. Escreva a linha de código no seu componente para que ele seja capaz de receber um `title` e `url` como `Astro.props`.

    <details>
    <summary>Mostre o código</summary>
    ```astro
    ---
    // src/components/BlogPost.astro
    const { title, url } = Astro.props;
    ---
    ```
    </details>

3. Adicione o template utilizado para criar cada item na sua lista de postagens do blog.

    <details>
    <summary>Mostre o código</summary>
    ```astro
    <!-- src/components/BlogPost.astro -->
    <li><a href={url}>{title}</a></li>
    ```
    </details>

4. Importe o novo componente em sua página Blog.

    <details>
    <summary>Mostre o código</summary>
    ```astro title="src/pages/blog.astro" ins={3}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Meu Blog de Aprendizagem Astro";
    ---
    ```
    </details>

5. Verifique você mesmo: veja o código completo do componente.

    <details>
    <summary>Mostre o código</summary>
    ```astro title="src/components/BlogPost.astro"
    ---
    const { title, url } = Astro.props
    ---
    <li><a href={url}>{title}</a></li>
    ```
    ```astro title="src/pages/blog.astro" ins={3,10}
    ---
    import BaseLayout from '../layouts/BaseLayout.astro';
    import BlogPost from '../components/BlogPost.astro';
    const allPosts = await Astro.glob('../pages/posts/*.md');
    const pageTitle = "Meu Blog de Aprendizagem Astro"
    ---
    <BaseLayout pageTitle={pageTitle}>
      <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
      <ul>
        {allPosts.map((post) => <BlogPost url={post.url} title={post.frontmatter.title} />)}
      </ul>
    </BaseLayout>
    ```
    </details>
</Steps>
</details>
</Box>



<Box icon="question-mark">

### Teste seu conhecimento

Se o seu componente Astro contém a seguinte linha de código: 

```astro
---
const minhasPostagens = await Astro.glob('./posts/*.md');
---
```

Escolha a sintaxe que você pode escrever para representar:

1. O título da sua terceira postagem do blog.  

    <MultipleChoice>
      <Option>
        `minhasPostagens.map((post) => <UltimaAtualizacao data={post.frontmatter.pubDate} />)`
      </Option>
      <Option isCorrect>
        `minhasPostagens[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={minhasPostagens[0].url}>Primeira Postagem!!</a>`
      </Option>
    </MultipleChoice>

2. Um link para a URL da sua primeira postagem do blog. 

    <MultipleChoice>
      <Option>
        `minhasPostagens.map((post) => <UltimaAtualizacao data={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `minhasPostagens[2].frontmatter.title`
      </Option>
      <Option isCorrect>
        `<a href={minhasPostagens[0].url}>Primeira Postagem!!</a>`
      </Option>
    </MultipleChoice>

3. Um componente para cada postagem, mostrando a data que ele foi atualizado pela última vez.

    <MultipleChoice>
      <Option isCorrect>
        `minhasPostagens.map((post) => <UltimaAtualizacao data={post.frontmatter.pubDate} />)`
      </Option>
      <Option>
        `minhasPostagens[2].frontmatter.title`
      </Option>
      <Option>
        `<a href={minhasPostagens[0].url}>Primeira Postagem!!</a>`
      </Option>
    </MultipleChoice>

</Box>

## Checklist

<Box icon="check-list">

<Checklist>
- [ ] Eu posso buscar por dados de meus arquivos locais.
- [ ] Eu posso mostrar uma lista de todas as minhas postagens do blog.
</Checklist>
</Box>

### Recursos

- [Documentação da API `Astro.glob()`](/pt-br/reference/api-reference/#astroglob)
